import {Button, Form, FormInstance, Input, Modal, Space} from 'antd';
import React, {PropsWithChildren, useState} from "react";

interface AddSceneModalProps {
    title?: string;
    modalVisible?: boolean;
    initialValues?: object;
    onClick?: (formData: Record<string, any>) => Promise<void>;
    onCancel?: (formData: Record<string, any>) => Promise<void>;
    onFinish?: (formData: Record<string, any>) => Promise<void>;
}
const AddSceneModal: React.FC<PropsWithChildren<AddSceneModalProps>> = (props) => {
    const { title, modalVisible, initialValues, onClick, onCancel, onFinish } = props;
    const [form] = Form.useForm();

    const SubmitButton = ({ form }: { form: FormInstance }) => {
        const [submittable, setSubmittable] = React.useState(false);

        // Watch all values
        const values = Form.useWatch([], form);

        React.useEffect(() => {
            form.validateFields({ validateOnly: true }).then(
                () => {
                    setSubmittable(true);
                },
                () => {
                    setSubmittable(false);
                },
            );
        }, [values]);

        return (
            <Button type="primary" htmlType="submit" disabled={!submittable}>
                Submit
            </Button>
        );
    };

    return (
        <Modal
            title={title}
            width={420}
            open={modalVisible}
            onClick={() => onClick?.()}
            onCancel={() => onCancel?.()}
            footer={null}
        >
            <Form form={form} initialValues={initialValues} onFinish={onFinish} name="validateOnly" layout="vertical" autoComplete="off">
                <Form.Item name="name" label="请输入场景名称" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item>
                    <Space>
                        <SubmitButton form={form} />
                        <Button htmlType="reset" onOk={() => {
                            console.log("取消")
                            console.log("取消弹框")
                            form.submit();
                            props.modalVisible = false;
                        }} >关闭</Button>
                        <Button htmlType="submit" onOk={() => {
                            debugger
                            console.log("gaunbi")
                            console.log("开启弹框")
                        }}>完成</Button>
                    </Space>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default AddSceneModal;